<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <script type="text/javascript" src="/static/common/boot/boot.js"></script>
    <style>
        .navbartop {
            margin-top: 10px;
        }

        .operatebtn {
            display: inline-block;
            width: 30%;
            margin: 0 auto;
        }

        .linkbtn {
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div role="navdiv">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <input type="hidden" id="planid" value=""/>
                <input type="hidden" id="isfinished" value="true"/>
                <a class="logo" href="/"><img src="/static/img/smb.png" alt="Nav logo"/></a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbartop">
                <ul class="nav navbar-nav">
                    <li name="tab" role="crawlrecord" class="active">
                        <a href="javascript:void(0);" role="crawlrecord" onclick="toggleActive(this)"><span
                                class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 查看爬取历史记录<span
                                class="sr-only">(current)</span></a>
                    </li>
                    <li name="tab" role="seealltask">
                        <a href="javascript:void(0);" role="seealltask" onclick="toggleActive(this)"><span
                                class="glyphicon glyphicon-th-list" aria-hidden="true"></span> 查看所有任务<span
                                class="sr-only"></span></a>
                    </li>
                    <li name="tab" role="addcrawltask">
                        <a href="javascript:void(0);" role="addcrawltask" onclick="toggleActive(this)"><span
                                class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新建爬取任务</a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" id="userLogo" data-toggle="dropdown" role="button"
                           aria-haspopup="true" aria-expanded="false">个人昵称 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li>
                                <a href="/user/updateinfo">修改个人资料</a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li>
                                <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2760628554&site=qq&menu=yes">
                                    <img border="0" src="http://wpa.qq.com/pa?p=2:2760628554:51" alt="联系管理员"
                                         title="联系管理员"/>
                                </a>
                            </li>
                            <li role="separator" class="divider"></li>
                            <li>
                                <a href="/user/loginout">注销</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>
</div>

<div role="contentdiv">

</div>


<script type="text/javascript">
    function getUserinfo() {
        var userinfo = {};
        $.ajax({
            url: '/user/sessionuserinfo',
            async: false,
            success: function (data) {
                userinfo = data["data"];
            }
        });
        return userinfo;
    }

    /*切换活跃样式; 1:对样式的修改,2:对内容的修改 */
    function toggleActive(obj) {
        var choosedTab = $(obj).attr("role");
        if (choosedTab != "addcrawltask") {
            $("#planid").val("");
        }
        var activeClass = $("li[role='" + choosedTab + "']").attr("calss");
        if (!activeClass) { /* 说明当前样式为空 , 那就要加上;*/
            $("li[role='" + choosedTab + "']").addClass("active");
        }
        /*去掉另外不是选中的样式*/
        $("li[role!='" + choosedTab + "']").removeClass("active");
        loadConenteBodyByActiveTab();
    }

    function loadConenteBodyByActiveTab() {
        var activeTab = $("li[class='active']").attr("role");
        $("div[role='contentdiv']").load("/crawl/plan/" + activeTab);
    }

    $(function () {
        var userinfo = getUserinfo();
        debugger;
        console.log(userinfo);
        if (userinfo["is_login"]) {
            $("#userLogo").html(userinfo["user"]["nickname"]);
            loadConenteBodyByActiveTab();
        } else {
            window.location.href = "/user/sign_in";
        }
    });
</script>
</body>
</html>